<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
            padding:0 0 12px 0;
            font-size:12px;
            line-height:22px;
            font-family:"\5b8b\4f53","Arial Narrow";             background:#fff;
        }
        form,ul,li,p,h1,h2,h3,h4,h5,h6{
            margin:0;
            padding:0;
        }
        img{border:0;}
        ul,li{list-style-type:none;}
        a {color:#00007F;text-decoration:none;}
        a:hover {
            color:#bd0a01;
            text-decoration:underline;
        }
        .box{
            width: 150px;
            margin: 100px auto;
        }
        .menu{
            overflow:hidden;
            border-color: #C4D5DF;
            border-style: solid;
            border-width: 0 1px 1px;
        }
        .menu li.level1 a{
            display: block;
            height: 28px;
            line-height: 28px;
            background:#EBF3F8;
            font-weight:700;
            color: #5893B7;
            text-indent: 14px;
            border-top: 1px solid #C4D5DF;
        }
        .menu li.level1 a:hover{
            text-decoration: none;
        }
        .menu li.level1 a.current{
            background:red;
        }
        .menu li ul{overflow:hidden;}
        .menu li ul.level2{display:none;}
        .menu li ul.level2 li a{
            display: block;
            height: 28px;
            line-height: 28px;
            background:#ffffff;
            font-weight:400;
            color: #42556B;
            text-indent: 18px;
            border-top: 0px solid #ffffff;
            overflow: hidden;
        }
        .menu li ul.level2 li a:hover{
            color:#f60;
        }
    </style>
</head>
<body>
<div class="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none">衬衫</a>
            <ul class="level2">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T恤</a></li>
                <li><a href="#none">长袖T恤</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2">
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2">
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        $(".level1 > a").click(function () {
            $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
        })
    })
</script>